---
title: Statamic & Astro
description: Ajouter du contenu à votre projet Astro en utilisant Statamic comme CMS
sidebar:
  label: Statamic
type: cms
stub: false
logo: statamic
i18nReady: true
---
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'

[Statamic](https://statamic.com/) est un CMS moderne à fichiers plats. Il permet aux développeurs de créer facilement des sites web et des applications dynamiques tout en offrant aux éditeurs de contenu une interface intuitive et conviviale pour la gestion du contenu.

## Intégration avec Astro

Statamic est livré avec une [API REST](https://statamic.dev/rest-api) et une [API GraphQL](https://statamic.dev/graphql) intégrées pour connecter vos données à Astro.

### Prérequis

Pour commencer, vous devez disposer des éléments suivants :

1. Les API REST et GraphQL ne sont disponibles que dans la version pro de Statamic. Vous pouvez essayer la version Pro gratuitement sur votre [machine locale](https://statamic.dev/tips/how-to-enable-statamic-pro#trial-mode).
2. **Un projet Astro** - Si vous avez besoin d'un projet Astro, notre [guide d'installation](/fr/install-and-setup/) vous permettra d'être rapidement opérationnel.
3. **Un site Statamic** - Si vous avez besoin d'un site Statamic, [ce guide](https://statamic.dev/quick-start-guide) vous aidera à démarrer.
N'oubliez pas d'activer l'[API REST](https://statamic.dev/rest-api#enable-the-api) ou l'[API GraphQL](https://statamic.dev/graphql#enable-graphql) en ajoutant `STATAMIC_API_ENABLED=true` ou `STATAMIC_GRAPHQL_ENABLED=true` dans le fichier `.env` et d'activer les ressources nécessaires dans le fichier de configuration de l'API.

:::caution
Tous les exemples supposent que votre site web a une collection appelée `posts`, qui a un plan appelé `post`, et que ce plan a un champ titre (champs de type texte) et un contenu (champ de type Markdown).
:::

### Récupération de données
:::caution
Si vous utilisez Statamic et Astro sur votre machine locale, n'oubliez pas d'utiliser `127.0.0.1` au lieu de `localhost` lorsque vous récupérez l'API.

Lors d'une requête sur le serveur Astro, `localhost` n'est pas résolu correctement comme il l'est dans le navigateur, et toute récupération vers l'une ou l'autre API échouera.
:::

#### API REST

Récupérez vos données Statamic à partir de l'URL de l'API REST de votre site. Par défaut, c'est `https://[VOTRE-SITE]/api/`. Ensuite, vous pouvez restituer les propriétés de vos données en utilisant la directive Astro `set:html={}`. 

Par exemple, pour afficher une liste de titres et leur contenu à partir d'une [collection sélectionnée](https://statamic.dev/collections) :

```astro title="src/pages/index.astro"
---
const res = await fetch("https://[VOTRE-SITE]/api/collections/posts/entries?sort=-date")
const posts = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}
```

#### GraphQL

Récupérez vos données Statamic avec l'URL de l'API GraphQL de votre site. Par défaut, c'est `https://[VOTRE-SITE]/graphql/`. Ensuite, vous pouvez restituer les propriétés de vos données en utilisant la directive Astro `set:html={}`. 

Par exemple, pour afficher une liste de titres et leur contenu à partir d'une [collection sélectionnée](https://statamic.dev/collections) :

```astro title="src/pages/index.astro"
---
const graphqlQuery = {
  query: `
    query Entries($page: Int, $locale: String) {
      entries(
        collection: "posts"
        sort: "date asc"
        limit: 20
        page: $page
        filter: { locale: $locale }
      ) {
        current_page
        has_more_pages
        data {
          title
          ... on Entry_Posts_Post {
              content
            }
        }
      }
    }
  `,
  variables: {
    page: page,
    locale: locale,
  },
};

const res = await fetch("https://[YOUR-SITE]/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(graphqlQuery),
})

const { data } = await res.json();
const entries = data?.entries;
---
<h1>Astro + Statamic 🚀</h1>
{
  entries.data.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}
```

### Publier votre site

Pour déployer votre site Astro, consultez nos [guides de déploiement](/fr/guides/deploy/) et suivez les instructions de votre hébergeur préféré.

## Ressources communautaires 

- [Comment construire un site statique en utilisant Statamic comme CMS headless](https://buddy.works/guides/statamic-rest-api) (Anglais)
- [Mise en œuvre des aperçus en direct Astro avec Statamic](https://maciekpalmowski.dev/implementing-live-previews-in-headless-statamic-when-using-astro/) (Anglais)

## Thèmes

<Grid>
  <Card title="Creek" href="https://astro.build/themes/details/creek/" thumbnail="creek.png"/>
</Grid>
